<link href="/assets/home/css/order.css" rel="stylesheet" />
<!-- 下拉刷新上拉加载 -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
</head>

<body>
    <div class="page__bd">
        <div class="weui-tab">
            <div id="mescroll" class="mescroll">
                <div class="weui-tab__panel" id="recordList">

                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- 底部 -->
    {include file="common/menu" /}
</body>

</html>
<script>
    /**
     * ------------ 我的消费 ------------
     * 进入本界面 
     * 发起axios请求，php通过用户id查询消费表，获取该用户的所有消费
     * 查询两张表（order 消费表  subject课程表）
     * 需要返回数据（课程id、消费金额、消费创建时间、课程名称、课程描述）
     */

    var mescroll = new MeScroll('mescroll', {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: DownCallback //下拉刷新的回调
        },
        up: {
            page: {
                num: 0, //默认从第0页开始起步
                size: 5, //每页显示多少条
                time: null, //时间
            },
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            htmlNodata: `<div class="more">没有更多了..</div>`, //没有更多数据的结构配置
            toTop: { //配置回到顶部按钮
                duration: 600,
                src: "/assets/home/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100
            }
        }
    })
    //下拉触发的回调函数
    function DownCallback() {
        //下拉刷新的回调; 默认重置上拉加载列表为第一页
        mescroll.resetUpScroll()
        $("#list").empty()
    }

    //上拉加载
    function UpCallback(current) {

        //当前页码值
        page = current.num
        limit = current.size

        //组装数据
        var data = {
            page,
            limit,
        }

        $.ajax({
            type: "post",
            dataType: 'json',
            success: function (success) {
                if (success.code == 0) {
                    //提醒
                    mui.toast(success.msg, { duration: 1000 })

                    // 暂无更多数据
                    mescroll.endBySize(0, 0)
                    return false
                }

                var list = success.data.list
                var count = success.data.count
                //设置上拉加载状态
                mescroll.endBySize(list.length, count)
                // 渲染消费数据到界面显示
                RecordList(list);
            },
            error: function (error) {
                // 消费查询失败
                mui.toast(error.msg);
                return false;
            }
        });

    }



    // 界面渲染方法
    function RecordList(list) {
        var html = ''

        for (var item of list) {
            html += `
            <div class="weui-form-preview">
                    <div class="weui-form-preview__hd">
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">消费金额</label>
                            <em class="weui-form-preview__value">¥ ${item.total}</em>
                        </div>
                    </div>
                    <div class="weui-form-preview__bd">
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">消费描述</label>
                            <span class="weui-form-preview__value">${item.content}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">消费时间</label>
                            <span class="weui-form-preview__value">${item.createtime_text}</span>
                        </div>
                    </div>
                </div>
                <br />
            `;
        }

        //将循环的内容追加到 ul元素中
        $("#recordList").append(html)

    }
</script>